<template>
  <el-drawer
    :title="title"
    :visible.sync="show"
    width="60%"
    :before-close="handleClose"
    @open="open"
  >
    <div class="parameter_box">
      <div class="">
        <el-form
          label-position="right"
          label-width="70px"
          :model="form"
          :rules="rules"
          ref="formName"
          size="small"
        >
          <el-row :gutter="0">
            <el-col :span="12" :offset="0">
              <el-form-item label="变量名:" prop="key">
                <el-input
                  suffix-icon="xxxx"
                  v-model="form.key"
                  placeholder="请输入"
                  @input="setText"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="文本:" prop="text">
                <el-input
                  suffix-icon="xxxx"
                  v-model="form.text"
                  placeholder="请输入"
                  disabled
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="单位:" prop="unit">
                <el-input
                  suffix-icon="xxxx"
                  v-model="form.unit"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="位置:" prop="pos">
                <el-select
                  size="small"
                  v-model="form.pos"
                  value-key=""
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in positionList"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="24"
              :offset="0"
              style="border-bottom: 1px solid #dcdfe6; margin-bottom: 20px"
            >
              <el-form-item label="类型:" prop="type" class="w100">
                <el-select
                  class="w100"
                  size="small"
                  v-model="form.type"
                  value-key=""
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.val"
                    :label="item.label"
                    :value="item.val"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-if="form.type == 0">
              <el-col :span="12" :offset="0">
                <el-form-item label="默认值:" prop="defaultValue">
                  <el-input
                    size="small"
                    placeholder="请输入值"
                    v-model="form.defaultValue"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="公差:" prop="errorRange">
                  <el-input
                    suffix-icon="xxxx"
                    v-model="form.errorRange"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="下限:" prop="lowerLimit">
                  <el-input
                    suffix-icon="xxxx"
                    v-model="form.lowerLimit"
                    placeholder="请输入"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="12" :offset="0">
                <el-form-item label="上限:" prop="upperLimit">
                  <el-input
                    suffix-icon="xxxx"
                    v-model="form.upperLimit"
                    placeholder="请输入"
                  ></el-input> </el-form-item
              ></el-col>
            </div>
          </el-row>
          <div v-if="form.type == 3">
            <div class="flex-x flex-space">
              <el-form-item label="自变量:" prop="argument" class="w100">
                <el-select
                  class="w100"
                  v-model="form.argument"
                  placeholder="请选择"
                >
                  <el-option-group
                    v-for="group in data"
                    :key="group.key"
                    :label="group.key"
                  >
                    <el-option
                      v-for="item in group.additional.filter(
                        (item) => item.key !== form.oldKey
                      )"
                      :key="item.key"
                      :label="item.key"
                      :value="item.key"
                    >
                    </el-option>
                  </el-option-group>
                </el-select>
                <!-- <el-select
                  class="w100"
                  size="small"
                  v-model="form.argument"
                  value-key=""
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in data"
                    :key="item.key"
                    :label="item.key"
                    :value="item.key"
                  >
                  </el-option>
                </el-select> -->
              </el-form-item>
            </div>
            <div class="flex-x flex-space">
              <el-form-item label="表达式:" prop="expression" class="w100">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="form.expression"
                >
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>

        <div v-if="form.type == 1">
          <div class="add_parameter flex-x flex-space">
            <!-- <div class="flex-x">
              <div style="margin-right: 10px; white-space: nowrap">Value:</div>
              <el-input
                size="small"
                placeholder="请输入键"
                v-model="formInline.value"
              >
              </el-input>
            </div> -->

            <div class="flex-x" style="margin: 0 10px">
              <div style="margin-right: 10px; white-space: nowrap">Text:</div>
              <el-input
                size="small"
                placeholder="请输入值"
                v-model="formInline.text"
              >
              </el-input>
            </div>

            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="metaDataSubmit"
              style="background: #2680d2"
              >添加</el-button
            >
          </div>
          <div class="par_tab_box">
            <el-table
              :row-style="{ height: '30px' }"
              :header-row-style="{ height: '36px' }"
              :header-cell-style="{ padding: 0 }"
              :cell-style="{ padding: '0' }"
              border
              :data="metaData"
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column
                align="center"
                type="index"
                label="序号"
                width="70"
              >
                <template slot-scope="scope">
                  {{ scope.$index }}
                </template>
              </el-table-column>
              <el-table-column prop="text" align="center" label="Text">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index)"
                    type="text"
                    icon="el-icon-delete"
                    style="color: #ff4d4f"
                  >
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <span class="footer_btns flex-x flex-right">
        <el-button @click="handleClose" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </span>
    </div>
  </el-drawer>
</template>

<script>
import { generateId } from "@/utils/index";
import _ from "lodash";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  data() {
    return {
      positionList: [
        {
          name: "下",
        },
        {
          name: "右",
        },
      ],
      typeList: [
        {
          label: "输入框",
          val: 0,
        },
        {
          label: "下拉框",
          val: 1,
        },
        {
          label: "区间[]",
          val: 2,
        },

        {
          label: "公式F(T)",
          val: 3,
        },
      ],
      rules: {
        key: [{ required: true, message: "请输入变量名", trigger: "blur" }],
      },
      form: {
        errorRange: "", //公差
        pos: "下",
        argument: "", //自变量
        expression: "", //表达式
        lowerLimit: "",
        upperLimit: "",
        key: "",
        unit: "",
        defaultValue: "",
        type: 0,
        value: "",
        text: "",
      },
      formInline: {
        text: "",
        value: "",
        id: generateId(),
        c: "",
        r: "",
      },
      metaData: [],
    };
  },
  methods: {
    setText() {
      this.form.text = `[${this.form.key}]`;
    },
    open() {
      Object.assign(this.$data, this.$options.data());
      this.$nextTick(() => {
        this.$refs["formName"].resetFields();
        this.$refs["formName"].clearValidate();
      });
    },
    handleClose() {
      this.$emit("update:show", false);
    },
    submit() {
      this.$refs["formName"].validate(async (valid) => {
        if (valid) {
          this.$emit("submit", {
            ...this.form,
            id: this.form.id ? this.form.id : generateId(),
            draggable: true,
            c: "",
            r: "",
            value: this.form.key,
            additional:
              this.form.type == 0
                ? []
                : this.metaData.map((item, index) => {
                    return {
                      ...item,
                      value: index,
                    };
                  }),
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    metaDataSubmit() {
      if (!this.formInline.text) {
        this.$msg("请输入Text");
        return;
      }
      // if (this.metaData.find((item) => item.value == this.formInline.value)) {
      //   this.$msg("Value不可重复");
      //   return;
      // }
      // if (!this.formInline.value) {
      //   this.$msg("请输入Value");
      //   return;
      // }
      this.metaData.push({
        ..._.cloneDeep(this.formInline),
        id: generateId(),
      });
      for (const key in this.formInline) {
        this.formInline[key] = "";
      }
    },
    deleteRow(index) {
      this.metaData.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
.par_tab_box {
}
.footer_btns {
  padding: 20px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 30%;
  background: #fff;
  z-index: 999;
}
.parameter_box {
  padding: 0 20px;
  padding-bottom: 100px;
  overflow: auto;
  height: 84vh;
}
</style>